<template>
  <div>
    <el-container class="first-container" style="height: 100%; margin-bottom: 60px">
      <el-header height="59px">
        <div class="logo">
          <i class="el-icon-s-home" @click="goHomePage"></i>
          <span class="el-icon-back" @click="$router.back()"></span>
          <span class="el-icon-right" @click="$router.forward()"></span>
        </div>
        <el-input ref="einputRef" v-model="searchContent" placeholder="请输入关键字" clearable size="mini" @focus="focus" @blur="blur">
          <i class="el-icon-search" slot="prefix"></i>
        </el-input>
        <!-- 搜索建议 -->
        <div ref="searchRef" class="search-suggest">
          <!-- 搜索结果 -->
          <div v-show="searchContent !== ''">
            <!-- 单曲 -->
            <div v-if="searchSuggestList.songs !== undefined">
              <h4>单曲</h4>
              <ul>
                <li v-for="item in searchSuggestList.songs" :key="item.id" @mousedown="addMusicToBox(item)">
                  <span>{{ item.name }} - {{ item.artists[0].name }}</span>
                </li>
              </ul>
            </div>
            <!-- 专辑 -->
            <div v-if="searchSuggestList.albums !== undefined">
              <h4>专辑</h4>
              <ul>
                <li v-for="item in searchSuggestList.albums" :key="item.id" @mousedown="goAlbum(item.id)">
                  <span>{{ item.name }} - {{ item.artist.name }}</span>
                </li>
              </ul>
            </div>
            <!-- 歌单 -->
            <div v-if="searchSuggestList.playlists !== undefined">
              <h4>歌单</h4>
              <ul>
                <li v-for="item in searchSuggestList.playlists" :key="item.id" @mousedown="goPlayList(item.id)">
                  <span>{{ item.name }}</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- 搜索历史 -->
          <div v-show="searchHistoryList.length !== 0 && searchContent === ''">
            <h4>搜索历史</h4>
            <i class="el-icon-delete" @mousedown="clearHistory"></i>
            <div class="searchHistoryBox">
              <div class="searchHistoryItem" v-for="(item, index) in searchHistoryList" :key="index">
                <span @mousedown="clickSearchHistory(item)">{{ item }}</span>
                <span @mousedown="delSearchHistory(item)">×</span>
              </div>
            </div>
          </div>
          <!-- 热搜榜 -->
          <div v-show="searchContent === ''">
            <h4>热搜榜</h4>
            <ul>
              <li v-for="(item, index) in restaurants" :key="index" @mousedown="hot(item.searchWord)">
                <span>{{ item.searchWord }}</span>
                <span>{{ item.score }}</span>
              </li>
            </ul>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="197px">
          <el-menu :default-active="$route.path" router class="el-menu-vertical-demo">
            <el-menu-item index="/find-music" route="/find-music">
              <span slot="title">发现音乐</span>
            </el-menu-item>
            <!-- <el-menu-item index="2" route="/video">
              <span slot="title">视频</span>
            </el-menu-item> -->
            <el-menu-item-group>
              <template slot="title">我的音乐</template>
              <el-menu-item index="/last-play" route="/last-play">最近播放</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="4">
              <template slot="title">
                <span>创建的歌单</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/my-love-song" route="/my-love-song">我喜欢的音乐</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <keep-alive exclude="Song,PlayList,Mv,Album">
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
    <PlayBox></PlayBox>
  </div>
</template>

<script>
import bus from '@/components/eventBus.js'

import PlayBox from '@/components/PlayBox/PlayBox.vue'

import { saveToStorage, loadFromStorage } from '@/js/storage'
import { saveSearchHistory, loadSearchHistory, deleteSearchHistory, clearSearchHistory } from '@/js/cache'

// 导入热搜列表数据
import { getHotSrarchListAPI, getSearchListAPI, getSearchSuggestListAPI } from '@/api/Search.js'

export default {
  name: 'App',
  components: {
    PlayBox
  },
  created() {
    this.initHotSearchList()
  },
  mounted() {
    this.searchHistoryList = loadSearchHistory()
  },
  updated() {},
  data() {
    return {
      activeName: 'first',
      // 搜索内容
      searchContent: '',
      // 热搜列表
      restaurants: [],
      // 搜索结果列表
      searchSuggestList: [],
      // 保存定时器
      timer: null,
      searchHistoryList: []
    }
  },
  methods: {
    // 获取最新音乐的列表数据
    async initHotSearchList() {
      const {
        data: { data: res }
      } = await getHotSrarchListAPI()
      this.restaurants = res
    },
    focus() {
      this.$refs.searchRef.style.top = '60px'
    },
    blur() {
      this.$refs.searchRef.style.top = '-999px'
    },
    // 通过点击，搜索输入框内容变为热搜内容之一
    hot(str) {
      event.preventDefault()
      this.searchContent = str
    },
    addMusicToBox(item) {
      bus.$emit('songId', item.id)
    },
    goAlbum(id) {
      this.$router.push({
        path: '/album',
        query: {
          id: id
        }
      })
    },
    goPlayList(id) {
      this.$router.push({
        path: '/playlist',
        query: {
          id: id
        }
      })
    },
    clickSearchHistory(item) {
      event.preventDefault()
      this.searchContent = item
    },
    // 删除搜索历史
    delSearchHistory(item) {
      event.preventDefault()
      deleteSearchHistory(item)
      this.searchHistoryList = loadSearchHistory()
    },
    // 清空搜索历史
    clearHistory() {
      event.preventDefault()
      clearSearchHistory()
      this.searchHistoryList = loadSearchHistory()
    },
    goHomePage() {
      this.$router.push('/find-music')
    }
  },
  watch: {
    // 侦听搜索输入框内容的变化,防抖
    searchContent(val) {
      // 清除旧定时器
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        if (val === '') {
          // 搜索内容为空时，清空搜索结果
          this.searchSuggestList = []
        } else {
          // 搜索音乐单曲
          const { data: res } = await getSearchSuggestListAPI({
            keywords: val
          })
          this.searchSuggestList = res.result
          saveSearchHistory(val)
          this.searchHistoryList = loadSearchHistory()
        }
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.el-header {
  position: fixed;
  z-index: 11;
  width: 100%;
  background-color: #ec4141;
  color: #333;
  text-align: center;
  line-height: 59px;
  .logo {
    position: absolute;
    i {
      margin-right: 100px;
      font-size: 30px;
      color: #fff;
      cursor: pointer;
    }
    span {
      display: inline-block;
      margin: 0 10px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      color: rgba(255, 255, 255, 0.5);
      border-radius: 10px;
      cursor: pointer;
    }
  }
  .el-input {
    width: 500px;
    /deep/ .el-input__inner {
      border: 0;
      border-radius: 14px;
    }
  }
  .search-suggest {
    position: absolute;
    top: -999px;
    left: 50%;
    margin-left: -250px;
    width: 500px;
    max-height: 600px;
    overflow-y: auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    /*滚动条*/
    &::-webkit-scrollbar {
      width: 5px;
    }

    /*滑块部分*/
    &::-webkit-scrollbar-thumb {
      background-color: #ccc9cd;
      border-radius: 2.5px;
    }
    h4 {
      margin-left: 20px;
      line-height: 35px;
      text-align: left;
    }
    li {
      line-height: 30px;
      overflow: hidden;
      cursor: pointer;
      &:hover {
        background-color: #f3f3f3;
      }
      span {
        margin: 0 20px;
        &:nth-child(1) {
          float: left;
        }
        &:nth-child(2) {
          float: right;
          font-size: 12px;
          color: #ccc;
        }
      }
    }
    .el-icon-delete {
      position: absolute;
      top: 8px;
      left: 100px;
      font-size: 18px;
      font-weight: 700;
      color: #666;
      cursor: pointer;
      &:hover {
        color: #333;
      }
    }
    .searchHistoryBox {
      margin: 0 15px;
      overflow: hidden;
      .searchHistoryItem {
        float: left;
        margin: 4px 4px;
        padding-right: 3px;
        line-height: 30px;
        border: 1px solid #d9d9d9;
        border-radius: 15px;
        background-color: #fff;
        cursor: pointer;
        &:hover {
          border: 1px solid #cfcfcf;
          background-color: #f2f2f2;
          span {
            &:nth-child(2) {
              opacity: 1;
            }
          }
        }
        span {
          padding: 0 2px;
          font-size: 14px;
          &:nth-child(1) {
            display: inline-block;
            padding-left: 19px;
            height: 30px;
            border-radius: 15px 0 0 15px;
          }
          &:nth-child(2) {
            opacity: 0;
          }
        }
      }
    }
  }
}

.el-aside {
  position: fixed;
  top: 59px;
  background-color: #fff;
  color: #333;
  overflow: hidden;
  .el-menu {
    border: 0;
    .el-menu-item {
      margin: 1px 0;
      height: 35.5px;
      line-height: 35.5px;
      &:hover {
        background-color: #f5f5f6;
      }
    }
    .el-menu-item.is-active {
      color: #353535;
      font-size: 16px;
      font-weight: 700;
      background-color: #f5f5f6;
    }
    /deep/.el-submenu__title {
      padding: 7px 0 7px 20px;
      height: auto;
      line-height: normal;
      font-size: 12px;
      color: #909399;
      &:hover {
        background-color: #f5f5f6;
      }
    }
  }
}

.el-main {
  margin-top: 59px;
  margin-left: 197px;
  border-left: 1px solid #e1e1e1;
  padding: 0;
  background-color: #fff;
  color: #333;
  text-align: center;
}
// 自定义滚动条样式
// ::-webkit-scrollbar {
//   width: 100px;
// }
// ::-webkit-scrollbar-track {
//   background-color: red;
// }
// ::-webkit-slider-thumb {
//   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
// }
/*控制整个滚动条*/
</style>
